<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-lx-calendar"></i> 合同管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>合同时效</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div class="container">
            <div class="handle-box">
                输入合同编号 :
                <el-input  placeholder="请输入" v-model="num" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
            </div>
            <el-table
                    v-loading="loading"
                    element-loading-text="数据加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                    :data="tableData"
                    border
                    class="table"
                    ref="multipleTable"
                    header-cell-class-name="table-header"
            >
                <el-table-column prop="contract_number" label="合同编号" align="center"></el-table-column>
                <el-table-column prop="contract_name" label="合同名" align="center"></el-table-column>
                <el-table-column prop="signing_time" label="签署时间" align="center"></el-table-column>
                <el-table-column prop="due_time" label="到期时间" align="center"></el-table-column>
                <el-table-column prop="validity_of_contract" label="有效时间" align="center"></el-table-column>
                <el-table-column prop="contract_status" label="合同状态" align="center"></el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total, prev, pager, next"
                        :current-page="currentPage1"
                        :page-size="pageSize"
                        :total="pageTotal"
                        @current-change="handleCurrentChange1"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>

<script>


    export default {
        name: 'contractShow',
        data() {
            return {
                pageIndex: 1,
                pageSize: 3,
                currentPage1:1,
                tableData: [],
                tableDatas: [],
                multipleSelection: [],
                delList: [],
                editVisible: false,
                pageTotal: 0,
                form: {},
                idx: -1,
                id: -1,
                num:'',
                loading:false
            };
        },
        created() {
           //按搜索获取时间信息,一进来什么都没
        },
        methods: {
            // 触发搜索按钮
            handleSearch() {
                this.loading=true;
                this.tableData=[];
                //按输入的合同编号搜索,仅查询,采用前端分页
                console.log("按合同:"+this.num+"搜索");
                this.$http.get('http://192.168.10.66:10000/contract/getContractMessageById?num='+this.num)
                //then获取成功；response成功后的返回值（对象）
                    .then(response=>{
                        this.loading=false;
                        this.tableDatas = response.data.forlist;
                        console.log(this.tableDatas)
                        //单页显示
                        if (this.tableDatas.length!=0){
                            if (this.tableDatas.length>=this.pageSize){
                                for (var i=0;i<this.pageSize;i++){
                                    this.tableData.push(this.tableDatas[i]);
                                }
                            }else {
                                for (var i=0;i<this.tableDatas.length;i++){
                                    this.tableData.push(this.tableDatas[i]);
                                }
                            }
                        }
                        this.pageTotal = response.data.pageTotal || 0;
                        console.log(this.tableData);
                        console.log(this.pageTotal);
                        if (this.pageTotal==0){
                            this.$message.warning(`无该编号合同!`);
                        }else {
                            this.$message.success(`成功搜索`+this.pageTotal+`条信息!`);
                        }

                    })
                    //获取失败
                    .catch(error=>{
                        this.loading=false;
                        this.$message.error(`网络错误或服务,无效搜索!`);
                    })

            },
            handleCurrentChange1: function(currentPage) {
                this.tableData=[];
                //前端分页,直接取值
                this.currentPage1 = currentPage;
                //从哪个开始
                var from=(currentPage-1)*this.pageSize;
                console.log("from:"+from);

                if (this.tableDatas.length-from>=this.pageSize){
                    for (var i=from;i<from+this.pageSize;i++){
                        this.tableData.push(this.tableDatas[i]);
                    }
                }else {
                    for (var i=from;i<this.tableDatas.length;i++){
                        this.tableData.push(this.tableDatas[i]);
                    }
                }
            }
        }
    };
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .table {
        width: 100%;
        font-size: 14px;
    }
    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
</style>

